<script setup lang="ts">
import { ref } from "vue";

const selectedWebsite = ref("");

const aiWebsites = [
  { name: "文心一言", url: "https://yiyan.baidu.com/" },
  { name: "通义千问", url: "https://qianwen.aliyun.com/" },
  { name: "豆包", url: "https://doubao.com/" },
  { name: "ChatGPT", url: "https://chat.openai.com/" },
  { name: "Claude", url: "https://claude.ai/" },
  { name: "星火大模型", url: "https://xinghuo.iflytek.com/" },
  { name: "New Bing", url: "https://www.bing.com/new" },
  { name: "豆包Pro", url: "https://doubao.com/pro" },
  { name: "MiniMax", url: "https://minimax.chat/" },
  { name: "智谱清言", url: "https://chat.zhipuai.com/" },
  { name: "MOSS", url: "https://moss.fastnlp.top/" },
  { name: "天工", url: "https://tiangong.qq.com/" },
];

const selectWebsite = (url: string) => {
  selectedWebsite.value = url;
};
</script>

<template>
  <div class="split-container">
    <div class="left-panel">
      <h2>AI 网站</h2>
      <ul class="website-list">
        <li
          v-for="site in aiWebsites"
          :key="site.url"
          @click="selectWebsite(site.url)"
        >
          {{ site.name }}
        </li>
      </ul>
    </div>
    <div class="right-panel">
      <iframe
        :src="selectedWebsite"
        frameborder="0"
        style="width: 100%; height: 100%"
      ></iframe>
    </div>
  </div>
</template>

<style scoped lang="scss">
.split-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.left-panel {
  width: 20%;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  border-right: 1px solid #ddd;
  color: black;
}

.website-list {
  list-style: none;
  padding: 0;

  li {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #e8f4fd;
    }
  }
}

.right-panel {
  flex: 1;
  background-color: whitesmoke;
}
</style>
